<template>
  <div class="container" v-loading="isLoading">
    <el-card>
      <template #header>
        <el-form inline :model="searchForm" ref="searchForm">
          <el-form-item label="标题" prop="name">
            <el-input v-model="searchForm.name" placeholder="请输入标题" />
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-select v-model="searchForm.status" placeholder="请选择状态">
              <el-option label="全部" />
              <el-option
                v-for="(oVal, oIdx) of status"
                :key="oIdx"
                v-bind="oVal"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="发布时间" prop="$createTime">
            <el-date-picker
              v-model="searchForm.$createTime"
              type="daterange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd HH:mm:ss"
              :default-time="['00:00:00', '23:59:59']"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitSearch">查询</el-button>
          </el-form-item>
        </el-form>
        <!-- <div class="table_tool">
          <el-button
            type="primary"
            icon="el-icon-plus"
            @click="showAddOrEdit = true"
            >新增</el-button
          >
        </div> -->
      </template>
      <el-table :data="tableData" border>
        <el-table-column prop="id" label="房屋编号（配置轮播图）" />
        <el-table-column prop="title" label="标题" />
        <el-table-column prop="nickname" label="联系人" />
        <el-table-column prop="phone" label="手机号" />
        <el-table-column prop="community_name" label="地址" />
        <el-table-column prop="check_status" label="审核状态">
          <template slot-scope="{ row }">
            <span :class="statusClass[row.check_status]">{{
              statusObj[row.check_status]
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180px" align="center">
          <template slot-scope="{ row }">
            <el-button
              type="text"
              @click="openEditRow(row, 'builingForm', initInfoCard)"
              >查看并处理</el-button
            >
            <el-button type="text" class="red" @click="delRowById(row, row.title)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <footer class="footer">
      <el-pagination
        background
        layout="total, sizes, pager, jumper"
        :current-page="pagination.page"
        :page-sizes="[10, 20, 30, 50, 100]"
        :page-size="pagination.page_size"
        :total="tableTotal"
        @size-change="(val) => (pagination.page_size = val)"
        @current-change="(val) => (pagination.page = val)"
      />
    </footer>

    <el-dialog
      :title="builingForm.$id ? '查看出租房详情' : '新增'"
      :visible.sync="showAddOrEdit"
      width="888px"
      @closed="() => $refs['builingForm'].resetFields()"
    >
      <el-form
        :model="builingForm"
        :rules="builingRules"
        ref="builingForm"
        label-width="4em"
      >
        <el-form-item prop="$id" hidden />
        <InfoCard v-model="tenancyInfo" />
        <el-divider />
        <el-form-item label="状态" prop="name">
          <el-radio-group v-model="builingForm.check_status">
            <el-radio
              v-for="(oVal, oIdx) of status"
              :key="oIdx"
              :label="oVal.value"
            >{{oVal.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注" prop="remarks">
          <el-input
            v-model="builingForm.remarks"
            type="textarea"
            row="6"
            placeholder="请输入备注"
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button
          type="primary"
          @click="submitRowData('builingForm')"
          :loading="loading.update"
          >提交处理</el-button
        >
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { table, addOrEdit } from "@/utils/mixins";
import Upload from "@/components/Upload/SingleImage.vue";
import InfoCard from "@/components/InfoCard.vue";
import _ from "lodash";
const MAPS = {
  tenancyMap: {
    标题: "title",
    "价格/月": "price",
    "面积/m2": "area",
    朝向: "orientation",
    户型: "house_type",
    类型: "$rentalType",
    楼层: "floor",
    总楼层: "all_floor",
    小区名称: "community_name",
    门锁: "lock",
    "绿化面积/%": "green",
    入住说明: "check_in",
    租期: "lease_term",
    微信号: "wechat",
    手机号: "phone",
    出租状态: "$status",
  },
  rentalTypeMap: {
    // 户型
    1: "整租",
    2: "合租",
  },
  statusMap: {
    // 出租状态
    1: "出租中",
    2: "已租出",
  },
};
export default {
  mixins: [table, addOrEdit],
  components: {
    Upload,
    InfoCard,
  },
  data: () => ({
    searchForm: {
      $action: ["getTenancyList", 'delTenancy'],
      $createTime: [],
    },
    builingForm: {
      $action: ["", 'editTenancy'],
      check_status: '',
      remarks: ''
    },
    builingRules: {},
    storageProFile: {
      标题: "2",
      联系人: "1",
      手机号: "3",
      地址: "3",
      内容: "4",
      图片: "",
    },
    // 审核状态
    status: [
      {
        value: 1,
        label: "待审核",
      },
      {
        value: 2,
        label: "已审核",
      },
      {
        value: 3,
        label: "未通过",
      },
    ],
    statusClass: {
      1: "blue",
      2: "green",
      3: "red",
    },

    tenancyInfo: {},
  }),
  computed: {
    // 状态对象
    statusObj() {
      return this.status.reduce(
        (acc, cur) => ((acc[cur.value] = cur.label), acc),
        {}
      );
    },
  },
  watch: {
    "searchForm.$createTime"(time) {
      let [create_time__gt, create_time__lt] = time || [];
      Object.assign(this.searchForm, { create_time__gt, create_time__lt });
    },
  },
  methods: {
    // 租赁详情
    initInfoCard({ row }) {
      // 房屋类型
      row.$rentalType = MAPS.rentalTypeMap[row.rental_type]
      // 出租状态
      row.$status = MAPS.statusMap[row.status]
      this.tenancyInfo = _.cloneDeepWith(MAPS.tenancyMap, (path) =>
        _.get(row, path)
      );
    },
  },
};
</script>

<style lang="scss" scoped></style>
